<ons-page>
    <ons-toolbar>
        <div class="left">
            <ons-back-button>返回</ons-back-button>
        </div>
        <div class="center">Input 输入框</div>
    </ons-toolbar>

    <div class="content-wrapper">
        <div class="info-box">
            <div style="display: flex; align-items: center;">
                <ons-icon icon="md-edit" class="info-box-icon"></ons-icon>
                <div>
                    <div class="info-box-title">Input 组件</div>
                    <div class="info-box-content">多种输入类型和表单控件</div>
                </div>
            </div>
        </div>

        <h3 class="section-title">文本输入</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-input id="textInput" placeholder="请输入文本" float></ons-input>
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('text-input')">
                <div class="code-actions-left">
                    <ons-icon id="icon-text-input" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-text-input" onclick="event.stopPropagation(); copyCode('text-input')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-text-input">
                <pre><code id="code-content-text-input">&lt;ons-input placeholder="请输入文本" float&gt;&lt;/ons-input&gt;</code></pre>
            </div>
        </div>

        <h3 class="section-title">密码输入</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-input id="passwordInput" type="password" placeholder="请输入密码" float></ons-input>
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('password-input')">
                <div class="code-actions-left">
                    <ons-icon id="icon-password-input" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-password-input" onclick="event.stopPropagation(); copyCode('password-input')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-password-input">
                <pre><code id="code-content-password-input">&lt;ons-input type="password" placeholder="请输入密码" float&gt;&lt;/ons-input&gt;</code></pre>
            </div>
        </div>

        <h3 class="section-title">数字输入</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-input id="numberInput" type="number" placeholder="请输入数字" float></ons-input>
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('number-input')">
                <div class="code-actions-left">
                    <ons-icon id="icon-number-input" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-number-input" onclick="event.stopPropagation(); copyCode('number-input')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-number-input">
                <pre><code id="code-content-number-input">&lt;ons-input type="number" placeholder="请输入数字" float&gt;&lt;/ons-input&gt;</code></pre>
            </div>
        </div>

        <h3 class="section-title">邮箱输入</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-input id="emailInput" type="email" placeholder="请输入邮箱" float></ons-input>
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('email-input')">
                <div class="code-actions-left">
                    <ons-icon id="icon-email-input" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-email-input" onclick="event.stopPropagation(); copyCode('email-input')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-email-input">
                <pre><code id="code-content-email-input">&lt;ons-input type="email" placeholder="请输入邮箱" float&gt;&lt;/ons-input&gt;</code></pre>
            </div>
        </div>

        <h3 class="section-title">搜索框</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-search-input id="searchInput" placeholder="搜索..."></ons-search-input>
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('search-input')">
                <div class="code-actions-left">
                    <ons-icon id="icon-search-input" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-search-input" onclick="event.stopPropagation(); copyCode('search-input')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-search-input">
                <pre><code id="code-content-search-input">&lt;ons-search-input placeholder="搜索..."&gt;&lt;/ons-search-input&gt;</code></pre>
            </div>
        </div>

        <h3 class="section-title">多行文本</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <textarea id="textareaInput" class="textarea" rows="4" placeholder="请输入多行文本" style="width: 100%;"></textarea>
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('textarea-input')">
                <div class="code-actions-left">
                    <ons-icon id="icon-textarea-input" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-textarea-input" onclick="event.stopPropagation(); copyCode('textarea-input')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-textarea-input">
                <pre><code id="code-content-textarea-input">&lt;textarea class="textarea" rows="4" placeholder="请输入多行文本" style="width: 100%;"&gt;&lt;/textarea&gt;</code></pre>
            </div>
        </div>

        <h3 class="section-title">开关</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-switch id="mySwitch" onchange="switchChanged()"></ons-switch>
                    <span id="switchStatus" style="margin-left: 10px;">关闭</span>
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('switch-input')">
                <div class="code-actions-left">
                    <ons-icon id="icon-switch-input" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-switch-input" onclick="event.stopPropagation(); copyCode('switch-input')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-switch-input">
                <pre><code id="code-content-switch-input">&lt;!-- HTML --&gt;
&lt;ons-switch id="mySwitch" onchange="switchChanged()"&gt;&lt;/ons-switch&gt;
&lt;span id="switchStatus"&gt;关闭&lt;/span&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function switchChanged() {
    var switchElement = document.getElementById('mySwitch');
    var status = document.getElementById('switchStatus');
    status.textContent = switchElement.checked ? '开启' : '关闭';
}
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <h3 class="section-title">单选框</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <ons-list>
                    <ons-list-item tappable>
                        <div class="left">
                            <ons-radio name="radioGroup" input-id="radio1" value="option1" onchange="radioChanged('选项 1')"></ons-radio>
                        </div>
                        <label for="radio1" class="center">
                            选项 1
                        </label>
                    </ons-list-item>
                    <ons-list-item tappable>
                        <div class="left">
                            <ons-radio name="radioGroup" input-id="radio2" value="option2" onchange="radioChanged('选项 2')"></ons-radio>
                        </div>
                        <label for="radio2" class="center">
                            选项 2
                        </label>
                    </ons-list-item>
                    <ons-list-item tappable>
                        <div class="left">
                            <ons-radio name="radioGroup" input-id="radio3" value="option3" onchange="radioChanged('选项 3')"></ons-radio>
                        </div>
                        <label for="radio3" class="center">
                            选项 3
                        </label>
                    </ons-list-item>
                </ons-list>
            </div>
            <div class="code-actions" onclick="toggleCode('radio-input')">
                <div class="code-actions-left">
                    <ons-icon id="icon-radio-input" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-radio-input" onclick="event.stopPropagation(); copyCode('radio-input')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-radio-input">
                <pre><code id="code-content-radio-input">&lt;ons-list&gt;
    &lt;ons-list-item tappable&gt;
        &lt;div class="left"&gt;
            &lt;ons-radio name="radioGroup" input-id="radio1" value="option1"&gt;&lt;/ons-radio&gt;
        &lt;/div&gt;
        &lt;label for="radio1" class="center"&gt;选项 1&lt;/label&gt;
    &lt;/ons-list-item&gt;
    &lt;ons-list-item tappable&gt;
        &lt;div class="left"&gt;
            &lt;ons-radio name="radioGroup" input-id="radio2" value="option2"&gt;&lt;/ons-radio&gt;
        &lt;/div&gt;
        &lt;label for="radio2" class="center"&gt;选项 2&lt;/label&gt;
    &lt;/ons-list-item&gt;
&lt;/ons-list&gt;</code></pre>
            </div>
        </div>

        <h3 class="section-title">复选框</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <ons-list>
                    <ons-list-item tappable>
                        <div class="left">
                            <ons-checkbox input-id="checkbox1" value="check1" onchange="checkboxChanged('复选框 1', this)"></ons-checkbox>
                        </div>
                        <label for="checkbox1" class="center">
                            复选框 1
                        </label>
                    </ons-list-item>
                    <ons-list-item tappable>
                        <div class="left">
                            <ons-checkbox input-id="checkbox2" value="check2" onchange="checkboxChanged('复选框 2', this)"></ons-checkbox>
                        </div>
                        <label for="checkbox2" class="center">
                            复选框 2
                        </label>
                    </ons-list-item>
                    <ons-list-item tappable>
                        <div class="left">
                            <ons-checkbox input-id="checkbox3" value="check3" onchange="checkboxChanged('复选框 3', this)"></ons-checkbox>
                        </div>
                        <label for="checkbox3" class="center">
                            复选框 3
                        </label>
                    </ons-list-item>
                </ons-list>
            </div>
            <div class="code-actions" onclick="toggleCode('checkbox-input')">
                <div class="code-actions-left">
                    <ons-icon id="icon-checkbox-input" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-checkbox-input" onclick="event.stopPropagation(); copyCode('checkbox-input')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-checkbox-input">
                <pre><code id="code-content-checkbox-input">&lt;ons-list&gt;
    &lt;ons-list-item tappable&gt;
        &lt;div class="left"&gt;
            &lt;ons-checkbox input-id="checkbox1" value="check1"&gt;&lt;/ons-checkbox&gt;
        &lt;/div&gt;
        &lt;label for="checkbox1" class="center"&gt;复选框 1&lt;/label&gt;
    &lt;/ons-list-item&gt;
    &lt;ons-list-item tappable&gt;
        &lt;div class="left"&gt;
            &lt;ons-checkbox input-id="checkbox2" value="check2"&gt;&lt;/ons-checkbox&gt;
        &lt;/div&gt;
        &lt;label for="checkbox2" class="center"&gt;复选框 2&lt;/label&gt;
    &lt;/ons-list-item&gt;
&lt;/ons-list&gt;</code></pre>
            </div>
        </div>

        <h3 class="section-title">范围选择器</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-range id="myRange" value="50" style="width: 100%;"></ons-range>
                    <span id="rangeValue" style="display: block; text-align: center; margin-top: 10px; font-weight: 600; color: #667eea;">50</span>
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('range-input')">
                <div class="code-actions-left">
                    <ons-icon id="icon-range-input" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-range-input" onclick="event.stopPropagation(); copyCode('range-input')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-range-input">
                <pre><code id="code-content-range-input">&lt;!-- HTML --&gt;
&lt;ons-range id="myRange" value="50" style="width: 100%;"&gt;&lt;/ons-range&gt;
&lt;span id="rangeValue"&gt;50&lt;/span&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
var range = document.getElementById('myRange');
var rangeValue = document.getElementById('rangeValue');

range.addEventListener('input', function() {
    rangeValue.textContent = range.value;
});
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <h3 class="section-title">选择器</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <select id="selectInput" class="select-input" onchange="selectChanged(this)">
                        <option value="" disabled selected style="display:none;">请选择一个选项</option>
                        <option value="1">选项 1</option>
                        <option value="2">选项 2</option>
                        <option value="3">选项 3</option>
                    </select>
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('select-input')">
                <div class="code-actions-left">
                    <ons-icon id="icon-select-input" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-select-input" onclick="event.stopPropagation(); copyCode('select-input')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-select-input">
                <pre><code id="code-content-select-input">&lt;select class="select-input"&gt;
    &lt;option value="" disabled selected&gt;请选择一个选项&lt;/option&gt;
    &lt;option value="1"&gt;选项 1&lt;/option&gt;
    &lt;option value="2"&gt;选项 2&lt;/option&gt;
    &lt;option value="3"&gt;选项 3&lt;/option&gt;
&lt;/select&gt;</code></pre>
            </div>
        </div>

        <h3 class="section-title">提交表单</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-button modifier="large--cta" onclick="submitForm()" style="width: 100%;">
                        <ons-icon icon="md-check" style="margin-right: 8px;"></ons-icon>
                        提交表单
                    </ons-button>
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('submit-form')">
                <div class="code-actions-left">
                    <ons-icon id="icon-submit-form" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-submit-form" onclick="event.stopPropagation(); copyCode('submit-form')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-submit-form">
                <pre><code id="code-content-submit-form">&lt;!-- HTML --&gt;
&lt;ons-button modifier="large--cta" onclick="submitForm()" style="width: 100%;"&gt;
    &lt;ons-icon icon="md-check"&gt;&lt;/ons-icon&gt;
    提交表单
&lt;/ons-button&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function submitForm() {
    // 收集所有表单数据
    var formData = {
        text: document.getElementById('textInput').value,
        password: document.getElementById('passwordInput').value,
        number: document.getElementById('numberInput').value,
        email: document.getElementById('emailInput').value
        // ... 更多字段
    };
    
    // 显示提交结果
    ons.notification.alert('表单提交成功！', {
        title: '成功'
    });
}
&lt;/script&gt;</code></pre>
            </div>
        </div>
    </div>

    <script>
        // 监听范围选择器变化
        document.addEventListener('init', function(event) {
            var page = event.target;
            
            // 初始化范围选择器
            var range = page.querySelector('#myRange');
            var rangeValue = page.querySelector('#rangeValue');
            
            if (range && rangeValue) {
                range.addEventListener('input', function() {
                    rangeValue.textContent = range.value;
                });
            }
        });

        function switchChanged() {
            var switchElement = document.getElementById('mySwitch');
            var status = document.getElementById('switchStatus');
            status.textContent = switchElement.checked ? '开启' : '关闭';
        }

        function radioChanged(option) {
            // 单选框改变事件
        }

        function checkboxChanged(name, checkbox) {
            // 复选框改变事件
        }

        function selectChanged(select) {
            // 选择器改变事件
        }

        function submitForm() {
            // 收集所有表单数据
            var formData = {
                text: document.getElementById('textInput').value || '未填写',
                password: document.getElementById('passwordInput').value ? '******' : '未填写',
                number: document.getElementById('numberInput').value || '未填写',
                email: document.getElementById('emailInput').value || '未填写',
                search: document.getElementById('searchInput').value || '未填写',
                textarea: document.getElementById('textareaInput').value || '未填写',
                switch: document.getElementById('mySwitch').checked ? '开启' : '关闭',
                radio: getSelectedRadio(),
                checkboxes: getSelectedCheckboxes(),
                range: document.getElementById('myRange').value,
                select: getSelectValue()
            };

            // 构建显示消息
            var message = '<div style="text-align: left;">' +
                '<strong>表单数据：</strong><br><br>' +
                '<strong>文本：</strong> ' + formData.text + '<br>' +
                '<strong>密码：</strong> ' + formData.password + '<br>' +
                '<strong>数字：</strong> ' + formData.number + '<br>' +
                '<strong>邮箱：</strong> ' + formData.email + '<br>' +
                '<strong>搜索：</strong> ' + formData.search + '<br>' +
                '<strong>多行文本：</strong> ' + (formData.textarea.length > 20 ? formData.textarea.substring(0, 20) + '...' : formData.textarea) + '<br>' +
                '<strong>开关：</strong> ' + formData.switch + '<br>' +
                '<strong>单选框：</strong> ' + formData.radio + '<br>' +
                '<strong>复选框：</strong> ' + formData.checkboxes + '<br>' +
                '<strong>范围：</strong> ' + formData.range + '<br>' +
                '<strong>选择器：</strong> ' + formData.select +
                '</div>';

            ons.notification.alert(message, {
                title: '表单提交成功',
                buttonLabel: '确定'
            });
        }

        function getSelectedRadio() {
            var radios = document.getElementsByName('radioGroup');
            for (var i = 0; i < radios.length; i++) {
                if (radios[i].checked) {
                    return '选项 ' + (i + 1);
                }
            }
            return '未选择';
        }

        function getSelectedCheckboxes() {
            var checkboxes = document.querySelectorAll('ons-checkbox');
            var selected = [];
            checkboxes.forEach(function(checkbox, index) {
                if (checkbox.checked) {
                    selected.push('复选框 ' + (index + 1));
                }
            });
            return selected.length > 0 ? selected.join(', ') : '未选择';
        }

        function getSelectValue() {
            var select = document.getElementById('selectInput');
            if (select.value) {
                return '选项 ' + select.value;
            }
            return '未选择';
        }
    </script>
    <script src="../js/code-display.js"></script>
</ons-page>
